<template>
	<view class="choose-community">
		<view class="current-location">
			<view class="title">
				当前地点
			</view>
			<view class="content">
				<text>{{currentLocation}}</text>
				<view @click="chooseLocation">
					<image src="../../static/icon/locate.png" />
					<text>重新定位</text>
				</view>
			</view>
		</view>

		<view class="community">
			<view class="title">
				附近社区
			</view>
			<u-cell-group border="false">
				<u-cell :url="'/pgk-house/building-house/building-house?list=' + item.title"
					v-for="item in communityList" :key="item.id" :title="item.title" isLink='true' border="false">
				</u-cell>
			</u-cell-group>

		</view>
		<map @markertap="onMarKer" :markers="markers" id="map" :longitude="location.longitude"
			:latitude="location.latitude"></map>
	</view>

</template>

<script>
	import qqmapwx from '../../utils/initQqMapWx.js'
	export default {
		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0
				},
				markers: [{
					id: 1,
					longitude: 0,
					latitude: 0,
					width: 30,
					height: 30
				}],
				currentLocation: '定位中...',
				communityList: []
			}
		},

		onLoad() {

			this.initLocation()
		},
		methods: {
			initLocation() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: 'true',
					success: (res) => {
						// console.log(res)
						this.updataLocation(res)
						this.initLocationText()
						this.searchCommunity()
					},
					fail(err) {
						console.log(err)
					}
				})
			},

			initLocationText() {
				qqmapwx.reverseGeocoder({
					location: this.location,
					success: (res, data) => {
						console.log(res.result.address)
						this.currentLocation = res.result.address
					}
				})
			},
			chooseLocation() {
				uni.chooseLocation({
					...this.location,
					success: (res) => {
						if (!res.name) return
						this.currentLocation = res.name
						this.updataLocation(res)
						this.searchCommunity()
					}
				})
			},
			updataLocation(res) {
				this.location.longitude = res.longitude
				this.location.latitude = res.latitude
				this.markers[0].longitude = res.longitude
				this.markers[0].latitude = res.latitude
			},

			searchCommunity() {
				qqmapwx.search({
					location: this.location,
					keyword: '小区住宅',
					page_size: 10,
					success: (res) => {
						console.log(res.data)
						this.communityList = res.data
						res.data.forEach(item => {
							item.id = item.id - 0
							this.markers.push({
								id: item.id - 0,
								longitude: item.location.lng,
								latitude: item.location.lat,
								width: 30,
								height: 30,
								iconPath: '/static/icon/house.png',
								title: item.title
							})

						})
					}
				})
			},

			onMarKer(e) {
				console.log(e)
				const house = this.markers.find((item) => {
					return item.id === e.markerId
				})
				console.log(house)
			}


		}
	}
</script>

<style lang="scss">
	.choose-community {
		height: 100%;
		background-color: #FAFAFA;

		.current-location {
			.title {
				padding: 0 30rpx;
				line-height: 86rpx;
			}

			.content {
				width: 750rpx;
				height: 102rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}

				view {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 6rpx;
					}

					text {
						color: #5591AF;
					}
				}
			}
		}

		.community {
			.title {
				padding: 0 30rpx;
				line-height: 86rpx;
			}

			::v-deep .u-cell__body {
				background-color: #fff;
			}
		}
	}

	#map {
		width: 750rpx;
		height: 750rpx;
	}
</style>
